<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>MeteoCal</title>
    </h:head>
    <h:body>
        <h:form id="homePage">
            
            <p:growl id="growl" showDetail="true"/> 
            <p:layout fullPage="true">
                                
                
                <p:layoutUnit class="layoutClass" position="north" size="88">
                    <div class="content">
                        <span class="siteName"> MeteoCal </span> 
                        <p:spacer width="180" height="10" /> Search:
                        <p:spacer width="15" height="10" />
                        
                        
                        
                        <p:selectOneMenu  value="#{publicScheduleBean.username}" 
                                          filter="true" filterMatchMode="contains"  >
                            <f:selectItems value="#{publicScheduleBean.users}" />                             
                        </p:selectOneMenu>
                        <p:spacer width="10" height="10" />
                        <p:commandButton  icon="ui-icon-search" id="searchCalendar" 
                                          actionListener="#{publicScheduleBean.loadCalendar()}" 
                                          update="panelpubcal" process="@parent" 
                                          oncomplete="PF('publicCalendarDialog').show();"/>
                        
                        
                        
                        
                        <p:spacer width="160" height="10" /> 
                        <p:commandLink id="option" action="#{eventBean.unload()}" 
                                       oncomplete="PF('dlgOption').show();" process="@this"
                                       value="#{loginBean.name}" style="color:white"/>
                        <p:spacer width="10" height="10" />
                        
                        
                        
                        
                        
                        <p:commandLink value="News" id="invitations" action="#{eventBean.unload()}" 
                                       oncomplete="PF('inviteDialog').show();" process="@this"
                                       style="color:white" />
                        <span class="count">#{invitationBean.loadNumberOfInvites()}</span>
                        <p:spacer width="20" height="10" />
                        
                        
                        
                        
                        <p:commandLink value="Logout" id="logout" action="#{loginBean.logout()}"
                                       style="color: white"/>
                    </div>
                </p:layoutUnit>
                
                
                
                <p:layoutUnit position="center">
                    <p:schedule id="schedule"  value="#{scheduleBean.model}"
                            class="schedule" aspectRatio="2.7"
                            leftHeaderTemplate="today"
                            centerHeaderTemplate="prev,title,next"
                            rightHeaderTemplate="month,agendaDay"
                            timeZone="GMT+1" widgetVar="myschedule">
                        
                        <p:ajax event="dateSelect"  listener="#{eventBean.onDateSelect}" 
                                update="eventDetails" oncomplete="PF('eventDialog').show();" />
                        <p:ajax event="eventSelect" listener="#{eventBean.onEventSelect}" 
                                update="eventDetails" oncomplete="PF('eventDialog').show();" />
                        
                    </p:schedule>
                </p:layoutUnit>
                
                
            </p:layout>
        
            
            
            
           
                   
            
            
            <p:dialog id="dialogOption" header="Option" widgetVar="dlgOption" showEffect="explode" 
                  hideEffect="fade" position="top,right" resizable="false" style="width: auto;height: auto" >
                
                <h:panelGrid id="panelOption" columns="2" >
                    <h:outputText value="Public Calendar:  " />            
                    <p:selectBooleanCheckbox value="#{setCalendarBean.status}">
                        <p:ajax listener="#{setCalendarBean.saveDecision()}" update="panelOption"  />
                    </p:selectBooleanCheckbox>
                </h:panelGrid>
            </p:dialog>
        
            
            
            
            
            <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip">
                <h:panelGrid id="eventDetails" columns="2">
                    <h:outputLabel for="title" value="Title:" />
                    <p:inputText id="title"  required="#{eventBean.required}" 
                                 requiredMessage="Title Required" disabled="#{!eventBean.isOwnEvent}"
                                 value="#{eventBean.beanEvent.title}"/>
 
                    <h:outputLabel for="from" value="From:" />
                    <p:calendar  disabled="#{!eventBean.isOwnEvent}" id="from" 
                                 value="#{eventBean.startDate}" pattern="dd/MM/yyyy HH:mm:ss" 
                                 required="#{eventBean.required}" requiredMessage="Insert Start Date"/>
 
                    <h:outputLabel for="to" value="To:" />
                    <p:calendar  disabled="#{!eventBean.isOwnEvent}" id="to" 
                                 value="#{eventBean.endDate}" pattern="dd/MM/yyyy HH:mm:ss" 
                                 required="#{eventBean.required}" requiredMessage="Insert End Date"   />

                    <h:outputLabel for="place" value="Place:" />
                    <p:inputText  disabled="#{!eventBean.isOwnEvent}" id="place" 
                                  value="#{eventBean.beanEvent.place}"  
                                  required="#{eventBean.required}" requiredMessage="Insert Place"  />
          
                    <p:outputLabel for="outdoor" value="Outdoor:"  />
                    <p:selectOneRadio disabled="#{!eventBean.isOwnEvent}" id="outdoor" 
                                      value="#{eventBean.beanEvent.outdoor}" 
                                      required="#{eventBean.required}" requiredMessage="Insert Out/in"   >
                        <f:selectItem id="outdoorno" itemLabel="No" itemValue="false" />
                        <f:selectItem id="outdooryes" itemLabel="Yes" itemValue="true" />
                    </p:selectOneRadio>

                    <p:outputLabel for="public" value="Public:"  />
                    <p:selectOneRadio  disabled="#{!eventBean.isOwnEvent}" id="public" 
                                       value="#{eventBean.beanEvent.publicEvent}" 
                                       required="#{eventBean.required}" requiredMessage="Insert Public/Private"   >
                        <f:selectItem itemLabel="Public" itemValue="true"/>
                        <f:selectItem itemLabel="Private" itemValue="false" />
                    </p:selectOneRadio>
                   
                    <p:outputLabel for="description" value="Description:" />
                    <p:inputTextarea id="description" disabled="#{!eventBean.isOwnEvent}" 
                                     value="#{eventBean.beanEvent.description}" 
                                     rows="4" cols="36" required="#{eventBean.required}"  
                                     requiredMessage="Insert Desctiption" style=" overflow-x: scroll; overflow-y: scroll; height:130px" />

                    <p:outputLabel for="invites" value="Invites:" />
                    <p:selectManyMenu  disabled="#{!eventBean.isOwnEvent}" id="invites"
                                       value="#{eventBean.toInviteUsers}" style="height:160px; width:350px; overflow-x:scroll "
                                       filter="true" filterMatchMode="contains" showCheckbox="true" >
                        <f:selectItems value="#{eventBean.listUser()}" var="listUser" 
                                       itemLabel="#{listUser}" itemValue="#{listUser}" />
                    </p:selectManyMenu>
                    
                                      
                    
                    <p:commandButton id="declineButton" value="Decline" 
                                     action="#{eventBean.decline()}" 
                                     actionListener="#{scheduleBean.loadCalendar()}" 
                                     rendered="#{eventBean.canDecline}" 
                                     update="growl" 
                                     oncomplete="PF('myschedule').update();PF('eventDialog').hide();" />
                    <p:commandButton id="modifyButton" value="Modify" 
                                     actionListener="#{eventBean.modify()}" 
                                     action="#{scheduleBean.loadCalendar()}" 
                                     rendered="#{!eventBean.creating}" 
                                     update="growl"  
                                     disabled="#{!eventBean.isOwnEvent}" 
                                     oncomplete="PF('myschedule').update();PF('eventDialog').hide();"  />
                    <p:commandButton id="addButton" value="Save" 
                                     actionListener="#{eventBean.create()}" 
                                     action="#{scheduleBean.loadCalendar()}"  
                                     rendered="#{eventBean.creating}" 
                                     update="growl" 
                                     disabled="#{!eventBean.isOwnEvent}" 
                                     oncomplete="PF('myschedule').update();PF('eventDialog').hide();" />  
                    <p:commandButton id="deleteButton" value="Delete" 
                                     actionListener="#{eventBean.cancel()}" 
                                     action="#{scheduleBean.loadCalendar()}" 
                                     rendered="#{!eventBean.creating}" 
                                     update="growl" 
                                     disabled="#{!eventBean.isOwnEvent}" 
                                     oncomplete="PF('myschedule').update();PF('eventDialog').hide();" />  

                </h:panelGrid>
            </p:dialog>
            
            
            
            
            
            
            <p:dialog header="Public Calendar"   showEffect="fade" hideEffect="fade"  
                      id="dialogpubcal" widgetVar="publicCalendarDialog">
                <h:panelGrid id="panelpubcal" columnClasses="value" 
                             style ="margin : 0px auto; width: 600px; height: 400px">
                    <h3 align="center">#{publicScheduleBean.username}'s Calendar</h3>
                    <p:schedule id="publicCal" value="#{publicScheduleBean.eventModel}"  
                                widgetVar="publicCalendar" timeZone="GMT+1" 
                                aspectRatio="2.7" style=" width: available"
                                leftHeaderTemplate="today"
                                centerHeaderTemplate="prev,title,next"
                                rightHeaderTemplate="month,agendaDay">
                        <p:ajax event="eventSelect"  listener="#{publicEventBean.onEventSelect}" 
                                update="eventDetailsPublic" oncomplete="PF('publicEventDialog').show();" />
                    </p:schedule>
                </h:panelGrid>
            </p:dialog>
           
            
            
            
            
            
            
            <p:dialog widgetVar="publicEventDialog" showEffect="fade" hideEffect="fade"  header="Details" >
                <h:panelGrid id="eventDetailsPublic" columns="2">
                    <h:outputLabel for="titlePublic" value="Title:" />
                    <p:outputLabel id="titlePublic" value="#{publicEventBean.event.title}" />

                    <p:outputLabel for="startDatePublic" value="From:" />
                    <p:outputLabel id="startDatePublic" value="#{publicEventBean.startDate}"/>

                    <p:outputLabel for="endDatePublic" value="To:" />
                    <p:outputLabel id="endDatePublic" value="#{publicEventBean.endDate}"/>

                    <h:outputLabel for="placePublic" value="Place:" />
                    <p:outputLabel id="placePublic" value="#{publicEventBean.event.place.city}"/>

                    <h:outputLabel for="descriptionPublic" value="Description:" />
                    <p:outputLabel id="descriptionPublic" value="#{publicEventBean.event.description}"/>

                    <p:outputLabel for="outdoorPublic" value="Outdoor:"  />
                    <p:outputLabel id="outdoorPublic" value="#{publicEventBean.event.isOutdoor()}"/>
                            
                    <p:outputLabel for="invitationPublic" value="invitations"  />

                    <p:dataList id="invitationPublic" value="#{publicEventBean.invitated}" var="invit" type="ordered">
                        #{invit}
                    </p:dataList>
                </h:panelGrid>
            </p:dialog> 
            
            
            
            
            
            
            
            
            
            
            
            
            
            <p:dialog header="Invitations" widgetVar="inviteDialog" showEffect="fade" 
                      hideEffect="fade"  id="inv-dialog" width="800px" height="300px" resizable="false">
                <h:panelGrid>

                    <p:carousel value="#{invitationBean.invites}" var="event" numVisible="1" 
                                itemStyle="height:200px;width:750px;" effect="easeInStrong" 
                                headerText="Invitation" style="margin-bottom:0;">

                        <p:tab> 
                            <p:panelGrid columns="2" columnClasses="label,value">
                                <h:outputText value="Event Name:" />
                                <h:outputText value="#{event.title}"  />

                                <h:outputText value="Creator:" />
                                <h:outputText value="#{event.creator.mail}" />

                                <h:outputText value="Place:" />
                                <h:outputText value="#{event.place}" />

                                <h:outputText value="When:"/>
                                <h:outputText value="From : #{event.startDate} To #{event.endDate}"/>

                                <h:outputText value="Detail:"/>
                                <h:outputText value="#{event.description}" />
                            </p:panelGrid>
                   
                        </p:tab>
                        <p:commandButton value="Accept" rendered="#{invitationBean.enableInvitation}" 
                                         id="accept-inv" update=":homePage:growl,:homePage:schedule" 
                                         action="#{invitationBean.acceptInvite(event)}" 
                                         actionListener="#{scheduleBean.loadCalendar()}" 
                                         oncomplete="PF('myschedule').update();"  />
                        <p:commandButton value="Decline"  rendered="#{invitationBean.enableInvitation}" 
                                         id="decline-inv"  update=":homePage:inv-dialog"  
                                         action="#{invitationBean.declineInvite(event)}" 
                                         oncomplete="PF('myschedule').update()" />                                   
                                          
                    </p:carousel> 
              
                </h:panelGrid>
            </p:dialog>
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
        </h:form>
        <style type="text/css">
            
            @import url(http://fonts.googleapis.com/css?family=Bitter:400,700);
            
            .layoutClass .ui-layout-unit-content{
                background: -moz-linear-gradient(
                    top,
                    #6d84b4 0%,
                    #3b5998 100%);
                background: -webkit-gradient(
                    linear, left top, left bottom, 
                    from(#6d84b4),
                    to(#3b5998));
            }
            
            .layoutClass{
                background: -moz-linear-gradient(
                    top,
                    #6d84b4 0%,
                    #3b5998 100%);
                background: -webkit-gradient(
                    linear, left top, left bottom, 
                    from(#6d84b4),
                    to(#3b5998));
            }
            
            .schedule{
                width:available;
            }
            
            .content{
                text-align: center;
                color: white;
                font-family:Helvetica,Arial;
            }
            
            .siteName:before{
                content:"MeteoCal";
                position:absolute;
                color: rgba(0,0,0,.3);
            }

            .siteName {
                margin: 10px auto;
                text-align: center;
                text-shadow: -1px 1px 0px rgba(255,255,255,0.1), 1px -1px 0px rgba(0,0,0,0.4);
                color: #444;
                font: 700 50px 'Bitter';
            }           
            .count{
		height: 13px;
		width: 13px;
		font-size: 7px;
		color: #fff;
		background-color: #e35f39;
		border-radius: 50%;
		display: inline-block;
		line-height: 13px;
		position: absolute;
		top: 35px;
            }
            
            
            
            
            
            
            
            
            
            

            

            

            .ClearNotWarned {

            }

            .ClearWarned {

            }

            .RainNotWarned {

            }

            .RainWarned {

            }

            .CloudsNotWarned {

            }

            .CloudsWarned {

            }

            .SnowNotWarned {

            }

            .SnowWarned {

            }

            .VariableNotWarned {

            }

            .VariableWarned {

            }
            .NoForecast {

            }

            .ClearWarned .fc-event-inner {    
                background-image: url('https://meteocal-demaria-daverio.googlecode.com/git/MeteoCalDaverioDemaria/src/main/resources/images/sunWarning.jpg');
            }
            .ClearNotWarned .fc-event-inner {
                background-image: url('https://meteocal-demaria-daverio.googlecode.com/git/MeteoCalDaverioDemaria/src/main/resources/images/sunNoWarning.jpg');
            }
            .RainWarned .fc-event-inner {             
                background-image: url('https://meteocal-demaria-daverio.googlecode.com/git/MeteoCalDaverioDemaria/src/main/resources/images/RainWarning.jpg');
            }
            .RainNotWarned .fc-event-inner {
                background-image: url('https://meteocal-demaria-daverio.googlecode.com/git/MeteoCalDaverioDemaria/src/main/resources/images/RainNoWarning.jpg');
            }
            .CloudsWarned .fc-event-inner {             
                background-image: url('https://meteocal-demaria-daverio.googlecode.com/git/MeteoCalDaverioDemaria/src/main/resources/images/CloudsWarning.jpg');
            }
            .CloudsNotWarned .fc-event-inner {
                background-image: url('https://meteocal-demaria-daverio.googlecode.com/git/MeteoCalDaverioDemaria/src/main/resources/images/CloudsNoWarning.jpg');
            }
            .SnowWarned .fc-event-inner {             
                background-image: url('https://meteocal-demaria-daverio.googlecode.com/git/MeteoCalDaverioDemaria/src/main/resources/images/SnowWarning.jpg');
            }
            .SnowNotWarned .fc-event-inner {
                background-image: url('https://meteocal-demaria-daverio.googlecode.com/git/MeteoCalDaverioDemaria/src/main/resources/images/SnowNoWarning.jpg');
            }
            .VariableWarned .fc-event-inner {             
                background-image: url('https://meteocal-demaria-daverio.googlecode.com/git/MeteoCalDaverioDemaria/src/main/resources/images/VariableWarning.jpg');
            }
            .VariableNotWarned .fc-event-inner {
                background-image: url('https://meteocal-demaria-daverio.googlecode.com/git/MeteoCalDaverioDemaria/src/main/resources/images/VariableNoWarning.jpg');
            }
            .NoForecast .fc-event-inner {
                background-image: url('https://meteocal-demaria-daverio.googlecode.com/git/MeteoCalDaverioDemaria/src/main/resources/images/NoForecast.jpg');
            }
        </style>
    </h:body>
</html>